<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <script src="./vue.js"></script>

    <title>详情页</title>
    <style>
      body {
        color: #0d0c22;
        font-weight: 400;
        line-height: 28px;
        font-size: 14px;
        text-align: center;
      }
      .btn {
        display: inline-block;
        color: #fff;
        border: none;
        border-radius: 8px;
        outline: none;
        background: #ea4c89;
        text-align: center;
        cursor: pointer;
        font-size: 14px;
        font-weight: 500;
        line-height: 20px;
        box-sizing: border-box;
        height: 40px;
        padding: 10px 16px;
      }
      .btn:hover {
        background: #f082ac;
      }
      .message {
        position: fixed;
        top: 50px;
        right: 20px;
        background: #fff;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        transform: translateX(200%);
        transition: transform 0.5s;
        width: 200px;
        padding: 20px;
      }
      .message.active {
        transform: translateX(0);
      }
    </style>
  </head>
  <body>
    <div id="app"></div>
    <script>
      var app = new Vue({
        el: "#app",
        template: `
          <div >
            <div style="text-align: center;">
              <img style="width: 500px; border-radius: 10px;" :src="product.img" />
              
              </div>
              <div style="text-align: center;padding-top: 30px;">
              <img style="width: 50px; border-radius: 50%;" src="./images/avatar.png" />
              
              </div>
            <div class="message" :class="{active: message !== ''}" v-html="message"></div>
            <h2 style="text-align: center; padding-top:0px;font-size: 32px; font-weight: 700; line-height: 30px;">
              {{product.name}}
              </h2>
            <p style="text-align: center;margin: 0;margin-bottom: 48px;">
              3D Designer
              </p>
              <span class="btn" @click="hire">Hire Me</span>
          </div>
        `,
        data: {
          message: "",
          product: {},
        },
        mounted() {
          const product = sessionStorage.getItem("product");
          this.product = product ? JSON.parse(product) : {};
        },
        methods: {
          setMessage(str) {
            this.message = str;
            if (this.timer) {
              clearTimeout(this.timer);
              this.timer = null;
            }
            this.timer = setTimeout(() => {
              this.message = "";
            }, 2000);
          },
          hire() {
            this.setMessage(
              `您hire了<span style="color: rgb(234, 76, 137);padding: 0 4px;">${this.product.name}</span>`
            );
          },
        },
      });
    </script>
  </body>
</html>
